<template>
  <view>
    <view ref="videoContainerRef" id="player"></view>
    <button @tap="watchVdom">查看那个视频dom</button>
  </view>
</template>

<script setup>
import {
  ref,
  reactive,
  watch,
  nextTick,
  onMounted,
  effect,
  onUnmounted,
} from "vue";
import Hls from "hls.js";
import Dplayer from "dplayer";
// 要播放flv的视频就必须要引入flv.js
import Flv from "flv.js";
// 播放器的容器
const videoContainer = ref();
// 播放器的实力
const playered = ref();
const props = defineProps({
  src: {
    type: String,
    default: "",
  },
  autoplay: {
    type: Boolean,
    default: false,
  },
});
const videoContainerRef = ref();
onMounted(() => {
  // console.debug(videoContainerRef?.value);
  if (videoContainerRef?.value?.$el) {
    videoContainer.value = videoContainerRef?.value?.$el;
  }
});
/**监听Url， 有值的话才进行渲染
 */
const unWatch = watch(props, (newVal, oldVal) => {
  console.debug(newVal, "新值");
});
const watchVdom = () => {
  console.debug(playered.value, "视频ref");
};
/**MuiPlayer无效 */
// effect(() => {
//     if (
//       typeof props.src === "string" &&
//       props.src.length > 0 &&
//       videoContainer.value
//     ) {
//       playered.value = new MuiPlayer({
//         container: "#player",
//         src: props.src,
//         parse: {
//           type: "hls",
//           title:'标题',
//           loader: new Hls,
//           config: {
//             // hls config to：https://github.com/video-dev/hls.js/blob/HEAD/docs/API.md#fine-tuning
//             debug: false,
//           },
//         },
//         pageHead: false,
//       });
//     };
//     nextTick(() => {
//             playered.value?.on('ready', function(event) {
//                 console.debug("reday完成")
//             });
//             // 播放发生错误
//             playered.value?.on('error', function(event) {
//                 console.log('error', event);
//             });
//     });
// });
effect(() => {
  nextTick(() => {
    setTimeout(() => {
      // console.debug(videoContainer.value, "容器dom是否被获取");
      playered.value = new Dplayer({
        //播放器的一些参数
        container: videoContainer.value,
        autoplay: props.autoplay, //是否自动播放
        theme: "#FADFA3", //主题色
        loop: true, //视频是否循环播放
        lang: "zh-cn",
        screenshot: false, //是否开启截图
        hotkey: true, //是否开启热键
        preload: "auto", //视频是否预加载
        volume: 0.7, //默认音量
        mutex: true, //阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
        video: {
          url: props.src, //视频地址
          // url: 'http://boliu.hbzcyc.com/474975DDEFA/474975DDEFA.m3u8', //视频地址
          type: "customHls",
          customType: {
            customHls: function (video, player) {
              // console.log(video.children[0].src, "真实的m3u8地址");
              const hls = new Hls(); //实例化Hls  用于解析m3u8
              const reallyM3u8URL = video.children[0].src;
              hls.loadSource(reallyM3u8URL);
              // console.log(hls, "整个播放器实例");
              hls.attachMedia(video);
            },
          },
        },
      });
    }, 200);
  });
});
onUnmounted(() => {
  // 组件卸载的时候销毁播放器实例
  playered.value?.destroy();
  // 并且置为null 让他可以垃圾回收
  playered.value = null;
  // console.debug(playered.value);
});
</script>

<style scoped>
#player {
  width: 100%;
  height: 600rpx;
}
</style>
